<template>
  <div class="d-view">
    <div class="header" v-loading="loading"
         element-loading-background="rgba(0, 0, 0, 0.1)">
      <div class="edition">莹图V2.0</div>
      <div class="title" v-if="!isShowSet">
        <i class="head_l"></i><span>{{ this.form.title }}</span><i class="head_r"></i>
      </div>
      <div class="editBox" v-else>
        <span @click="dialogVisible = true">编辑</span>
      </div>
      <div class="operation">
        <headerBtn @func="getMsgFormSon" :isShowSet="isShowSet"></headerBtn>
      </div>
    </div>
    <div class="content clearfix">
      <div class="conLeft">
        <div class="box box_top">
          <workmanship :isShowSet="isShowSet" @func1="success"></workmanship>
        </div>
        <div class="box">
          <acceptanceCheck :isShowSet="isShowSet" @func1="success"></acceptanceCheck>
        </div>
      </div>
      <div class="conCenter">
        <videoplayback :isShowSet="isShowSet" @func1="success"></videoplayback>
      </div>
      <div class="conRight">
        <div class="box box_top">
          <team :isShowSet="isShowSet" @func1="success"></team>
        </div>
        <div class="box">
          <environment :isShowSet="isShowSet" @func1="success"></environment>
        </div>
      </div>
    </div>
    <el-dialog title="栏目设置"
               v-loading="loading"
               :close-on-click-modal="false"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="editFrom" label-width="100px">
        <el-form-item label="栏目标题：">
          <el-input v-model="editFrom.title" class="inputDiv"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit()">保存继续编辑</el-button>
        <el-button type="text" @click="submit(true)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import headerBtn from "../../components/headerBtn.vue";
import workmanship from "./workmanship.vue";
import team from "./team.vue";
import videoplayback from "./video.vue";
import acceptanceCheck from "./acceptanceCheck.vue";
import environment from "./environment";
import {workmanshipRequest} from "@/utils/http/request";

export default {
  data() {
    return {
      loading: false,
      isShowSet: false,
      dialogVisible: false,
      form: {
        title: "",
      },
      editFrom:{},
    };
  },
  mounted() {
    this.getName()
  },
  components: {
    headerBtn,
    workmanship, //工艺
    acceptanceCheck, //验收
    team, //监理团队
    environment, //环境
    videoplayback,
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  methods: {
    submit(isClose) {
      this.loading = true
      workmanshipRequest.setNameEdit({screenName: this.editFrom.title}).then((res) => {
        if (res.code === "01") {
          this.getName()
          this.dialogVisible = false
          if (isClose) {
            this.isShowSet = false;
          }
        }
      }).catch(() => {
      })
    },
    getMsgFormSon(data) {
      this.isShowSet = data;
    },
    //接收字组件传递的参数
    success(res) {
      this.isShowSet = res;
    },
    getName() {
      this.loading = true
      workmanshipRequest.getName().then(res => {
        const {code, screenName} = res
        if (code === '01') {
          this.form.title = screenName
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/base";

.d-view {
  overflow: hidden;

  .header {
    width: 100%;
    height: 56px;
    line-height: 56px;
    position: relative;
    margin-bottom: 72px;

    .edition {
      position: absolute;
      left: 60px;
      color: #ff8fa2;
      font-weight: bold;
      font-size: 25px;
      width: 150px;
    }

    .title {
      width: 1084px;
      margin: 0 auto;
      background: url(../../assets/image/headBj.png) no-repeat;
      background-size: 100%;
      text-align: center;
      color: #fdf0a8;
      font-size: 33px;
      font-weight: bold;

      span {
        margin: 0 16px;
      }

      .head_l {
        width: 124px;
        height: 22px;
        display: inline-block;
        background: url(../../assets/image/head_l.png) no-repeat;
      }

      .head_r {
        width: 124px;
        height: 22px;
        display: inline-block;
        background: url(../../assets/image/head_r.png) no-repeat;
      }
    }

    .editBox {
      width: 1084px;
      margin: 0 auto;
      background: #384768;
      border: 1px solid #67b1ea;
      color: #6ef7ff;
      font-size: 20px;
      align-items: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      span {
        cursor: pointer;
      }
    }

    .operation {
      position: absolute;
      top: 10px;
      right: 60px;
    }
  }

  .content {
    padding: 0 60px 10px 60px;
    height: calc(100% - 130px);

    .conLeft {
      width: 420px;
      height: 100%;
      float: left;

      .box {
        height: 50%;


        &.box_top {
          margin-bottom: 50px;
          height: 43%;
        }
      }
    }

    .conCenter {
      height: 100%;
      width: calc(100% - 900px);
      float: left;
      margin: 0 30px;
    }

    .conRight {
      height: 100%;
      width: 420px;
      float: right;

      .box {
        height: 48%;

        &.box_top {
          margin-bottom: 50px;
          height: 45%;
        }
      }
    }
  }
}
</style>
